import { useRef } from 'react'
import './index.css'
import { useDispatch } from 'react-redux'
import {addTodoAction, aysnAddAction} from '../../redux/todos'
/* 
头部组件
*/
export default function Header() {

  const dispatch = useDispatch()

  const inputRef = useRef()

  const handleKeyUp = (e) => {
    // 判断是回车键才处理
    if (e.keyCode!==13) { // 如果不是回车, 直接结束
      return
    }
    // 得到input
    // const input = inputRef.current
    const input = e.target
    // 读取输入的文本title
    const title = input.value.trim() // 去掉两侧的空格
    
    // 如果没有输入, 或输入的是空格, 都不添加
    if (title==='') {
      input.value = '' // 去除输入框中可能有的空格
      return
    }

    // 分发同步action 添加一个todo
    // dispatch(addTodoAction(title))
    // 分发异步action 添加一个todo
    dispatch(aysnAddAction(title))
    // 清除输入
    input.value = ''
  }

  return (
    <div className="todo-header">
      <input ref={inputRef} onKeyUp={handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
    </div>
  )
}
